<template>
<div class="bg">
    <div class="login" align="center">
    <img width="200" height="280" src="../../assets/dtxx.gif" alt="">
  
    <van-tabs v-model="active" background="transparent" 
    line-width="60px" line-height="2.5px"
    title-active-color="#BE0E0E" title-inactive-color="#4D0909">
        <van-tab title="密码登录">
        <van-form @submit="onSubmit" 
        >
        <van-field  van-form 
        v-model="username"
        name="username"
        left-icon="manager"
        placeholder="     请输入用户名"
        :rules="rules.username" 
        />
        <van-field 
        v-model="password"
        type="password"
        name="password"
        left-icon="lock"
        placeholder="     请输入登录密码"
        :rules="rules.password"
        />
        <van-field
        v-model="seccode"
        type="seccode"
        name="seccode"
        center
        clearable
        left-icon="envelop-o"
        placeholder="     请输入验证码"
        >
        <template #button>
        <span class="checkCode" @click="createCode">{{checkCode}}</span>
        </template>
</van-field>
        <van-button round block @click="reset">重置</van-button>
        <van-button round block type="info" native-type="submit">登录</van-button>
        </van-form>
        </van-tab>
        <van-tab title="扫码登录">
        <h1>手机扫码，安全登录</h1>
        <img src="../../assets/xbx.jpg" alt="" >
        <h2><van-icon name="scan" size="20" color="#000000" />打开App,扫一扫登陆</h2>
    </van-tab>
    </van-tabs>
    
    <div class="dsf">
        <van-divider
        :style="{ color: '#283F4F', borderColor: '#283F4F', padding: '0 16px'}"
        >
        第三方用户登录
        </van-divider>
     
        <van-row gutter="50" >
            <van-col><van-icon name="wechat" size="25" color="#1F7A31"  /></van-col>
            <van-col><van-icon name="alipay" size="25" color="#127676" /></van-col>
            <van-col><van-icon name="phone" size="25" color="#185F26" /></van-col>
        </van-row>

       </div> 

        <p class="zhuce">还未注册？立即<router-link to="/my/register">注册</router-link></p>
  
</div>

    <div class="contact">联系我们|诚招英才
    广西柳州恭送股份有限公司-<a>88888888</a></div>

</div>

</template>

<script>
import Vue from'vue';
import{Form}from'vant';
import{Field}from'vant';
import {login} from '@/request'
import { Toast } from 'vant';
import { setCookie } from '@/utils/cookie';
import { Grid, GridItem } from 'vant';
import { Icon } from 'vant';
import { Divider } from 'vant';
import { Col, Row } from 'vant';
import { Tab, Tabs } from 'vant';


Vue.use(Toast);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Col);
Vue.use(Row);
Vue.use(Divider);
Vue.use(Icon);
Vue.use(Grid);
Vue.use(GridItem);

Vue.use(Toast);
Vue.use(Form);
Vue.use(Field);

export default {
 data () {
 return {
    active:2,
    rules: {
    username: [
 { 
 required: true, 
 message: '' ,
 trigger: 'onChange'

 }
 ],
 password: [
 { 
 required: true, 
 message: '' ,
 trigger: 'onChange'

 }
 ]
 },
 username: '',
 password: '',
 seccode:'',
 checkCode:''
 }
 
 },
 mounted () {
    this.createCode();
  }, 

 methods: {
     createCode() {
		var code = "";
		var codeLength = 4; 
		var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
			'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');  
		for(var i = 0; i < codeLength; i++) {  
			var index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）  
			code += random[index]; //根据索引取得随机数加到code上  
		}
		this.checkCode = code; //把code值赋给验证码  
	},
    reset(){
        this.username = '';
        this.password = '';
        this.seccode = '';
    },
    onSubmit(values) { 
        if(this.seccode === '') {
            Toast.fail('验证码不能为空!');
            this.createCode();
            return false;}
        if(this.seccode != this.checkCode) {
            Toast.fail('验证码错误!');
            this.createCode();
            return false;
        }
    var _this = this
    // console.log('submit', values);
    login(values).then(data => {
    var {code, msg} = data
    if(code === 1) {
    // 成功
    // console.log('成功');
    Toast.success({
    message: msg,
    onClose() {
        //存储cookie
        setCookie('username', values.username, 7200)
        setCookie('nickname', data.data.nickname, 7200)
        //获取本地存储中的url
        var url = localStorage.getItem('url')
    // 跳转
    if(url){
        //删除这个本地存储
        localStorage.removeItem('url')
        _this.$router.push(url)
    }else{
         _this.$router.push('/my')
    }
    }
    })
    } else {
    // 失败
    // console.log('失败');
    Toast.fail(msg)
    }
    })
    },

    }
    }

</script>

<style scoped>

.bg{
    width: 100%;
    height: 100vh;
    background-image: url('../../assets/lj.jpg');
    background-size: 100% 100%;
}

h1{     
    color: rgb(231, 32, 10);
    font-size: 17px;
    font-family: "楷体";
}
.zhuce{
    position: relative;
}

h2{
    font-size: 12px;
    color: #b50629;
    font-family: "宋体";
}
.login{ 
    width: 200px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 50px 40px 40px 40px;
    box-shadow: 0px 0px 5px 6px rgba(205, 172, 62, 0.755);
    background-color:#dda235;
    border-radius: 4ch;
}
.dsf{
    position: absolute;
    top: 260px;
    left: 0px;
    right: 0;
    bottom: 0;
    margin: auto;
}
p{
    color: rgb(255, 255, 255);
    
}
.van-field{
    margin:5px 30px 20px 21px;
    width:200px;
    background-color: transparent;
}

.van-tabs{
   position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.van-button{
    width: 90px;
    height: 30px;
    /* background-color: transparent; */
    background-color:rgba(230, 55, 12, 0.878)  ;
    float:left;
    position: relative;
    top: 0px;
    left:30px;
    right: 0;
    bottom: 0;
    margin-left: 10px;
    color: #eaecec;
    
}

.van-divider{
    font-size: 16px;
    line-height:24px;
}
.van-row{
    position: absolute;
    top: 50px;
    left:53.5px;
    right: 0;
    bottom: 0;
    
}
.contact{
    position: absolute;
    top: 85%;
    left: 12%;
    font-family: '楷体';
    color:#130202f2
}
.contact a{
    color:#c30b30e5;
    font-weight: bolder;
}
</style>